﻿@buttonBorder : 3px;
@buttonBorderRadius :1em;
@roundButtonColor :#e5e2e2;

a.gridButton{
    margin: 2px 5px 2px 5px !important;
    width: 60px !important;
    height: 25px !important;
    /*background-color:#5bc6ea !important;*/
    text-decoration:none;
    float :right;
    text-align :right;
    border : @buttonBorder solid #ccc;
    border-radius :@buttonBorderRadius;
    /*line-height: 0; 
    font-size: 0;
    color: transparent;*/
}

a.smallGridButton{
    margin: 2px 5px 2px 5px !important;
    width: 20px !important;
    height: 25px !important;
    background-color: @roundButtonColor !important;
    text-decoration:none;
    float :right;
    text-align :right;
   // border : @buttonBorder solid #ccc;
    border-radius :@buttonBorderRadius;
    color: transparent;
}

a.gridDeleteButton {
    background :url("../Images/DeleteButton.png") no-repeat 5px 5px;
}

a.gridEditButton {
    background :url("../Images/EditButton.png") no-repeat 5px 5px;
}

a.gridDetailsButton {
    background :url("../Images/DetailsButton.png") no-repeat 5px 5px;
}

a.gridAddNewButton {
    background :url("../Images/AddButton.png") no-repeat 5px 5px;
}
a.gridAddButton {
    margin-right: 2px !important;
    width: 90px !important;
    height: 25px !important;
    background-color:#5bc6ea !important;
    text-decoration:none;
    float :right;
    text-align :right;
    background :url("../Images/AddButton.png") no-repeat 5px 5px;
}

input.gridSearchButton {
    margin-right: 2px !important;
    width: 90px !important;
    height: 25px !important;
    text-decoration:none;
    text-align :right;
    background :url("../Images/SearchButton.png") no-repeat 5px 5px;
}

span.gridSortAscColumn
{
    width:16px;
    height:16px;
    background :url("../Images/SortAscButton.png") no-repeat 0px 5px;
}

span.gridSortDescColumn
{
    background :url("../Images/SortDescButton.png") no-repeat 0px 5px;
}

.gridLinkPage {
    margin: 2px !important;
    width: 22px !important;
    height: 22px !important;
    background-color: @roundButtonColor !important;
    padding-left: 0px;
    padding-right: 0px;
    text-decoration: none;
    float: left;
    text-align: center;
    // border : @buttonBorder solid #ccc;
    border-radius: @buttonBorderRadius;
    // color: transparent;
    a:hover {
        .radialGradientButton(@SelectedPageStartColor, @SelectedPageEndColor);
    }
}

//http://learn.shayhowe.com/html-css/backgrounds-gradients
@SelectedPageStartColor :#5bc6ea;
@SelectedPageEndColor :#0d8bb6;

.gridPageSelected{
    margin: 2px !important;
    width: 22px !important;
    height: 22px !important;
    padding-left :0px;
    padding-right :0px;
    text-decoration:none;
    float :left;
    text-align :center;
   // border : @buttonBorder solid #ccc;
    border-radius :@buttonBorderRadius;
   // color: transparent;
    background: #5bc6ea!important;
   .radialGradientButton(@SelectedPageStartColor, @SelectedPageEndColor);
}

.radialGradientButton(@startColor, @endColor) {
    background: -webkit-radial-gradient(@startColor, @endColor)!important;
    background: -moz-radial-gradient(@startColor, @endColor)!important;
    background: -ms-radial-gradient(@startColor, @endColor)!important;
    background: -o-radial-gradient(@startColor, @endColor)!important;
    background: radial-gradient(@startColor, @endColor)!important;
}

.linearGradientButton(@startColor, @endColor) {
    background: -webkit-linear-gradient(@startColor, @endColor)!important;
    background: -moz-linear-gradient(@startColor, @endColor)!important;
    background: -ms-linear-gradient(@startColor, @endColor)!important;
    background: -o-linear-gradient(@startColor, @endColor)!important;
    background: linear-gradient(@startColor, @endColor)!important;
}

.gridFirstPage{
    background :url("../Images/FirstButton.png") no-repeat 3px 3px;
    color: transparent !important;
}
.gridLastPage {
        background :url("../Images/LastButton.png") no-repeat 3px 3px;
    color: transparent !important;
}
.gridNextPage {
    background: url("../Images/NextButton.png") no-repeat 3px 3px;
    color: transparent !important;
}
.gridPrevPage {
    background: url("../Images/PreviousButton.png") no-repeat 3px 3px;
    color: transparent !important;
}

@gridTableBorder : 0.1em solid #dbdbde;

table.gridTable {
    border: 0.1em solid #ccc;
    //width: 95%;
    width: 100%;

    td {
        padding: 0.05em 0.5em 0.01em 0.5em;
        border: @gridTableBorder;
    }

        td.gridDataAlignRight {
            text-align: right;
        }

    th {
        padding: 0.01em 0.5em 0.01em 0.5em;
        border: @gridTableBorder;

        a {
            width: 100% !important;
        }
    }

    tr:nth-child(even)  {
        background-color: #f3f3f4;
    }
    /*tr:nth-child(even) td {        background-color: #f3f3f4;    }*/

    tr:nth-child(odd)  {
        background-color: #f9f9f9;
    }
    /*tr:nth-child(odd) td {        background-color: #f9f9f9;    }*/
}


@gridHeaderFooterHeight :2em;
@gridHeaderFooterColor :#f3f3f4;

@gridHeaderFooterStartColor :#f3f3f4;
@gridHeaderFooterEndColor :#ebebf5;

tr.gridHeader {
    height: @gridHeaderFooterHeight;
    background-color: @gridHeaderFooterColor;
    .linearGradientButton( @gridHeaderFooterStartColor, @gridHeaderFooterEndColor);
}

tr.gridFooter{
    height:@gridHeaderFooterHeight;
    background-color: @gridHeaderFooterColor;
    .linearGradientButton( @gridHeaderFooterStartColor, @gridHeaderFooterEndColor);
}

tr.gridRow{
    background-color:#f3f3f4;
}
tr.gridAlternatingRow{
    background-color:#f9f9f9;
}

.gridSearchCell{
    padding :1px !important;
}
.gridSearchTable{
    margin:1px !important;
}

.gridSearchText{
    width :100px !important;
    padding :3px!important;
}
